<template>
  <div>
    <el-button type="success" @click="refresh">刷新</el-button>
    <!-- 表单 -->
    <el-table
      ref="multipleTable"
      :data="Transport"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="transportId" align="center" label="计划单号" width="120">
      </el-table-column>
      <el-table-column prop="route" label="路线" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="goodsName" label="货物类型" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="username" label="客户名称" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="100">
        <template slot-scope="scope">{{ scope.row.creationTime }}</template>
      </el-table-column>
      <el-table-column prop="number" label="总数量" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="weight" label="总重量" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="bulk" label="总体积" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" width="155" align="center">
         <template slot-scope="scope">
          <!-- 弹出框按钮 -->
          <el-button
            @click="drawer = true,handleEdit1(scope.$index, scope.row)"
            type="primary"
            plain
            size="mini"
            style="margin-left: 16px"
          >
            派车处理
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 弹出框 -->
    <el-drawer
      title="指派车辆"
      :visible.sync="drawer"
      :direction="direction"
      size="400px"
      :before-close="handleClose"
    >
      <div class="asas">
        <div class="popover">
          <span>承运商</span>
          <el-select v-model="vehicles.carrierId" placeholder="请选择">
            <el-option
              v-for="item in vehicle.tCarrier"
              :key="item.carrierId"
              :label="item.carrierName"
              :value="item.carrierId"
            ></el-option>
          </el-select>
        </div>

        <div class="popover">
          <span>车&nbsp;&nbsp;&nbsp;&nbsp;辆</span>
          <el-select v-model="vehicles.carId" placeholder="请选择">
            <el-option
              v-for="item in vehicle.tCar"
              :key="item.carId"
              :label="item.carPlate"
              :value="item.carId"
            ></el-option>
          </el-select>
        </div>

        <div class="popover">
          <span>司&nbsp;&nbsp;&nbsp;&nbsp;机</span>
          <el-select v-model="vehicles.driverId" placeholder="请选择">
            <el-option
              v-for="item in vehicle.tDriver"
              :key="item.driverId"
              :label="item.driverName"
              :value="item.driverId"
            ></el-option>
          </el-select>
        </div>

        <el-button type="primary" style="margin-top: 15px" @click="handleEdit"
          >提交</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "untreated",
  props: ["search", "sta0"],
  data() {
    return {
      /* 分页 */
      currentPage: 1,
      pageSizes: [10, 20, 30],
      pageSize: 10,
      total: 0,
      /* 弹出框 */
      drawer: false,
      direction: "rtl",

      /* 获取车辆信息 */
      vehicle: [],
      /* 绑定选择框数据 */
      vehicles: [],

      /* 派车信息 */
      dispatch: [],
      /* 勾选框条数 */
      multipleSelection: "",
      /* 初始化数据对象 */
      Transport: [],
    };
  },
  components: {},
  /* 监听事件 */
  watch: {
    "search.transportId": {
      handler() {
        console.log(this.search.transportId + "asdhkajsd");
        this.findAll(
          this.currentPage,
          this.pageSize,
          this.search.transportId,
          this.search.usernames
        );
      },
    },
   /*  drawer: {
      handler() {
        console.log("asda");
        this.handleEdit1();
      },
    }, */
    "search.usernames": {
      handler() {
        console.log(this.search.usernames + "asdhkajsd");
        this.findAll(
          this.currentPage,
          this.pageSize,
          this.search.transportId,
          this.search.usernames
        );
      },
    },
    sta0: {
      handler() {
        console.log(this.search.usernames + "12121212121");
        this.search.transportId = null;
        this.search.usernames = null;
        this.findAll(
          this.currentPage,
          this.pageSize,
          this.search.transportId,
          this.search.usernames
        );
      },
    },
  },
  methods: {
    /* 弹出框关闭 */
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    /* 弹出框派车 */
    handleEdit1(index,row) {
      console.log("成功"+row.transportId);
      this.vehicles.transportId = row.transportId;
      this.$http({
        method: "GET",
        url: "http://localhost:8090/tTransport/vehicle",
      }).then((resp) => {
        console.log(resp);
        this.vehicle = resp.data.data.vehicle;
      });
    },

    /* 刷新数据 */
    refresh() {
      this.search.transportId = null;
      this.search.usernames = null;
      this.findAll(
        this.currentPage,
        this.pageSize,
        this.search.transportId,
        this.search.usernames
      );
    },

    /* 多选数据赋值 */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    /* 初始化数据 */
    findAll(currentPage, pageSize, transportId, usernames) {
      /* 判断搜索框是否有值 */
      if (this.search.transportId != null || this.search.usernames != null) {
        transportId = this.search.transportId;
        usernames = this.search.usernames;
        console.log(transportId + "asd" + usernames);
      }
      var status = 0;
      /* asiox */
      this.$http({
        method: "GET",
        url: "http://localhost:8090/tTransport",
        params: {
          currentPage: currentPage,
          pageSize: pageSize,
          transportId: transportId,
          username: usernames,
          status: status,
        },
      }).then((resp) => {
        console.log(resp);
        this.Transport = resp.data.data.records;
        this.total = resp.data.data.total;
      });
    },

    /* 每一页条数改变的方法 */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findAll(
        this.currentPage,
        this.pageSize,
        this.search.transportId,
        this.search.usernames
      );
    },

    /* 页码改变的方法 */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.findAll(
        this.currentPage,
        this.pageSize,
        this.search.transportId,
        this.search.usernames
      );
    },

    handleAdd(index, row) {},

    /* 数据提交:提交单个订单表 */
    handleEdit() {
      this.drawer = false;
      this.$http({
        method: "POST",
        url: `http://localhost:8090/tDispatch`,
        params:{
          carrierId:this.vehicles.carrierId,
          carId:this.vehicles.carId,
          driverId:this.vehicles.driverId,
          transportId:this.vehicles.transportId
        }
      }).then(resp=>{
        console.log(resp);
        this.refresh();
      })

      console.log(this.vehicles);
    },
  },
  mounted() {},
  created() {
    /* 初始化查询数据 */
    this.findAll(1, 10, this.search.transportId, this.search.usernames);
  },
};
</script>

<style>
.popover {
  margin-top: 5%;
  margin-bottom: 10px;
}
.asas {
  margin-left: 5%;
}
</style>
